<template>
  <div class="main">
    <div class="searchBox clearfix">    
    	<div class="searchContent">
    		<el-input
			  placeholder="姓名"
			  v-model="param.customerName"
			  clearable>
			</el-input>
			<el-input
			  placeholder="手机号"
			  v-model="param.customerPhonenumber"
			  clearable>
			</el-input>	
			 <el-select v-model="param.status"  style="width:120px;" clearable placeholder="全部" >
	            <el-option
	            v-for="item in statusList"
	            :key="item.value"
	            :label="item.name"
	            :value="item.value">
	            </el-option>
	        </el-select>		
			<el-button @click="tableList">查找</el-button>    	
			<el-button @click="repairAll()">一键补传</el-button>    		
    	</div>    	
    </div>
    <div class="tableList">
	   <el-table
			ref="multipleTable"
			:data="list.rows"
			tooltip-effect="dark"
			style="width: 100%"
			@select='onTableSelect'
			@selection-change="handleSelectionChange">
			<el-table-column
			type="selection"
			width="55" 
			>
			</el-table-column>
			<el-table-column label="预警类型" >
				<template slot-scope="scope">{{ scope.row.warningType }}</template>
			</el-table-column>
			<el-table-column label="人员信息" width="200" >
				<template slot-scope="scope">{{ scope.row.customerName }}{{ scope.row.customerPhonenumber }}</template>
			</el-table-column>
			<el-table-column label="门店信息" >
				<template slot-scope="scope">{{ scope.row.hotelName }}</template>
			</el-table-column>
			<el-table-column label="原因" width="100" >
				<template slot-scope="scope">{{ scope.row.reason }}</template>
			</el-table-column>
			<el-table-column label="结果" >
				<template slot-scope="scope">{{ scope.row.result }}</template>
			</el-table-column>
			<el-table-column label="状态" width="100" >
				<template slot-scope="scope" >
					<span v-if="scope.row.status==1">已处理</span>
					<span v-else>未处理</span>
				</template>				
			</el-table-column>
		  <el-table-column  label="操作"  width="150"  fixed="right">
		      <template slot-scope="scope">			
		        <el-button
		          size="mini"
		          class="orangeBtn"				
				   v-if="scope.row.status==0"
		          @click="repair(scope.row)">补传</el-button>		      
		      </template>
		    </el-table-column>
					
		</el-table>
    </div>  
    <div class="pagination">   
         <el-pagination
            @size-change="changeNum"
            @current-change="changePage"
            :current-page="param.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="param.pageSize"
            layout="total, prev, pager, next,sizes"
            :total="list.total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'leasingInfo',
	data () {
		return {			
			idNum:'',
			url:'/warnings/Warning',
			param: {				
					customerName:null, 
					customerPhonenumber:null,
					status:null,                         
	                pageNum: 1,
	                pageSize: 10,                    	                	            
			},
			selected:0,
			item:[],
			repairval:[],
			statusList:[{
				name:'未处理',
				value:0
			},{
				name:'已处理',
				value:1
			}]				  							
		}
	},
	methods: { 	
		repair(item){
			let obj=[];
			for(let i=0;i<this.repairval.length;i++){
				if(this.repairval[i].warningId!=item.warningId){					
					this.selected=0
				}else{					
					this.selected=true;				
					obj.push(this.repairval[i]);
					break;
				}
			}
			if(this.selected==0){
					this.$message({
						showClose: true,
						message:"请勾选当前项！",
						type: 'warning'
				    });
				
			}else{	
			
				this.$axios({
					method: "post",
					url: "/warnings/supplement",
					data:obj,
					headers: {
						"Content-Type": "application/json;charset=UTF-8"
					}
				})
				.then(res=> {               
					if (res.data.code == 0) {    
						this.$message({
							message: res.data.msg,
							type: 'success'
						});     
						this.selected=0;  
						this.item=[];          
						this.$store.dispatch('getlist',{param:this.param,url:this.url});  														
					}else {                      
						this.$message({
							showClose: true,
							message:res.data.msg,
							type: 'warning'
						});
					}
				})
				.catch(error=>{
					this.$message({
						showClose: true,
						message: '错了哦，这是一条错误消息',
						type: 'error'
					});
				});										
																				
			}
									         
		},
		repairAll(item,type){
			if(this.repairval.length==0){
					this.$message({
						showClose: true,
						message:"请勾选未处理项！",
						type: 'warning'
				    });				
			}else{				
				this.$axios({
					method: "post",
					url: "/warnings/supplement",
					data: this.repairval,
					headers: {
						"Content-Type": "application/json;charset=UTF-8"
					}
				})
				.then(res=> {               
					if (res.data.code == 0) {  
						this.$message({
							message: res.data.msg,
							type: 'success'
						});                      
						this.$store.dispatch('getlist',{param:this.param,url:this.url});  														
					}else {                      
						this.$message({
							showClose: true,
							message:res.data.msg,
							type: 'warning'
						});
					}
				})
				.catch(error=>{
					this.$message({
						showClose: true,
						message: '错了哦，这是一条错误消息',
						type: 'error'
					});
				});      								
			}									         
		},
		onTableSelect(rows, row) {
			this.selected = rows.length && rows.indexOf(row) !== -1;
			console.log("fffffffffff");
			console.log(this.selected);  // true就是选中，0或者false是取消选中			
			this.repairval.push(rows);
		},
 		handleSelectionChange(val) {  //全选时			
				this.repairval=val;
				console.log(val);
      	},
	    changeNum(val) {   
	 		this.param.pageNum=1;        
	        this.param.pageSize = val; 
	        this.$store.dispatch('getlist',{param:this.param,url:this.url});       
	    },
	    changePage(val) { 
	        this.param.pageNum=val;   
	       this.$store.dispatch('getlist',{param:this.param,url:this.url});       
	       
	    }, 
	    tableList(){
	    	this.$store.dispatch('getlist',{param:this.param,url:this.url}); 
	    }   		    
	},
	mounted() {   	
        this.$store.dispatch('getlist',{param:this.param,url:this.url});              
    },
    computed:{
    	...mapState(['list'])
    }
}
</script>
<style scoped>

</style>
